<template>
  <div>
    <div class="navbar">
      <van-nav-bar
        fixed
        placeholder
        safe-area-inset-top
        title="购买服务"
        @click-left="back"
      >
        <template #left>
          <van-icon name="arrow-left" size="16px" color="#333" />
        </template>
      </van-nav-bar>
    </div>
    <div class="topCard">
      <img src="@/assets/integral.png" alt="" />
      <div>
        <img src="@/assets/star.png" alt="" />
        <span>{{ integral }}</span>
      </div>
    </div>
    <div class="money">
      <div>请选择充值金额：</div>
      <div style="margin-top: 15px" class="cardlist">
        <div
          v-for="(item, index) in data"
          :key="index"
          :class="['card', current === index ? 'cur' : '']"
          @click="price(item, index)"
        >
          <div>{{ item.originalPrice + "积分" }}</div>
          <div>￥{{ item.total + ".00" }}</div>
          <div v-if="item.originalPrice - item.total != 0" class="icon">
            {{ `省${item.originalPrice - item.total}元` }}
          </div>
          <img
            v-if="totalPrice == item.total"
            src="@/assets/sanjiao.png"
            alt=""
            width="27px"
          />
        </div>
      </div>
    </div>
    <div class="explain">
      <div>积分说明：</div>
      <div>
        <span>①每次联系直租房源消耗5积分</span>
        <span>(原价10积分)</span>
      </div>
      <!-- <div>
        <span>②每次联系二手房业主房源消耗600积分</span>
        <span>(原价1200积分)</span>
      </div> -->
      <div>②对已联系的房源再次发起联系不扣除积分</div>
      <div class="div">
        ③如遇房东无法联系或房源已租，可联系客服或“我的-投诉”入口退还<span
          class="double"
          >双倍</span
        >积分
      </div>
    </div>
    <!-- <div class="pay">
      <div>
        <img src="@/assets/weixin.png" alt="" width="40px" />
        <span>微信支付</span>
      </div>
      <div>
        <img src="@/assets/gougou.png" alt="" width="20px" />
      </div>
    </div> -->
    <div class="payMoney">
      <div>
        <span>订单金额：</span>
        <span>￥{{ totalPrice }}</span>
      </div>
    </div>
    <div class="bgBtn">
      <button
        :disabled="totalPrice == 0 || totalPrice == undefined"
        @click="goPay"
      >
        立即支付
      </button>
    </div>
  </div>
</template>

<script>
import { getPayServe, generateServeOrder, wxSignatures } from "@/apis/pay.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      totalPrice: 22,
      data: [],
      serveId: 20,
      current: 1,
    };
  },
  computed: {
    ...mapGetters(["integral"]),
  },
  mounted() {
    this.getPay();
  },
  created() {
    // console.log('route', this.$route)
    const _this = this;
    _this.$plusReady(() => {
      plus.payment.getChannels((channels) => {
        for (const i in channels) {
          if (channels[i].id === "wxpay") {
            _this.wxChannel = channels[i];
          }
        }
      });
    });

    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$store.dispatch("manage/getInfo");
    },
    back() {
      this.$router.go(-1);
    },
    price(item, index) {
      this.totalPrice = item.total;
      this.serveId = item.serveId;
      this.current = index;
    },
    getPay() {
      var params = {
        cate: 4,
      };
      getPayServe(params).then((res) => {
        console.log("getPayServe:", res);
        if (res.code === 200 || res.code === 201) {
          this.data = res.result.list;
        }
      });
    },
    goPay() {
      const _this = this;
      generateServeOrder({ serveId: _this.serveId }).then((res) => {
        // console.log('generateServeOrder:', this.serveId)
        if (res.code === 201) {
          wxSignatures({ type: 1, orderId: res.result.orderId }).then((res) => {
            // console.log('wxSignatures:', res)
            if (res.code === 201) {
              _this.$plusReady(() => {
                console.log(_this.wxChannel);
                plus.payment.request(
                  _this.wxChannel,
                  JSON.stringify(res.result),
                  function (result) {
                    // console.log('plus.payment:', result)
                    _this.$toast.success("支付成功");
                    // _this.$router.push({ path: "/home/me" });
                    _this.$router.go(-1);
                  },
                  function (e) {
                    console.log("error", JSON.stringify(e));
                    _this.$toast("支付失败");
                  }
                );
              });
            } else {
              _this.$toast("下单失败");
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.double {
  color: #d43b33;
  font-size: 16px;
  font-weight: bolder;
}
.payMoney {
  position: relative;
  margin-top: 70px;
  margin-bottom: 40px;
  & > div {
    position: absolute;
    right: 15px;
    & > span:nth-child(1) {
      font-size: 17px;
      font-weight: bold;
      color: #333333;
    }
    & > span:nth-child(2) {
      color: #d43b33;
      font-weight: bolder;
    }
  }
}
.pay {
  border: 1px solid rgba(220, 220, 220, 0.438);
  width: 90%;
  border-radius: 27.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 10px;
  box-sizing: border-box;
  transform: translateX(5px);
  & > div {
    margin: 5px 15px;
    img {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
.explain {
  margin-top: 10px;
  font-size: 13px;
  color: #999999;
  margin-left: 10px;
  .div {
    color: black;
    font-weight: bold;
  }
  div {
    margin-bottom: 5px;
    span:nth-child(2) {
      margin-left: 5px;
      color: #d43b33;
      font-weight: bold;
    }
  }
  & > div:nth-child(1) {
    font-weight: bold;
  }
}
.topCard {
  position: relative;
}
.topCard > img {
  width: 100%;
}
.topCard > div > img {
  width: 28px;
  margin-right: 5px;
}
.topCard > div > span {
  font-size: 38px;
  font-weight: bolder;
  color: #fff;
}
.topCard > div {
  position: absolute;
  top: 36%;
  width: 100vw;
  text-align: center;
}
.cardlist {
  display: flex;
  flex-wrap: wrap;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(220, 220, 220, 0.5);
  width: 45%;
  height: 68px;
  margin: 1.4% 1.4% 2.8% 2.8%;
  border-radius: 4px;
  box-sizing: border-box;
  flex-wrap: wrap;
  img {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  & > div:nth-child(1) {
    font-size: 17px;
    font-weight: bolder;
    color: #f0953d;
  }
  & > div:nth-child(2) {
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    pointer-events: none;
  }
  div {
    margin-left: 15px;
  }
}
.money > div:nth-child(2),
.money > div:nth-child(3) {
  display: flex;
}
.money {
  margin-top: 15px;
  & > div:first-child {
    color: #333333;
    font-weight: bold;
    margin-left: 10px;
  }
}
.icon {
  background-color: #d43b33;
  font-size: 12px;
  border-radius: 15px 15px 15px 2px;
  width: 50px;
  height: 20px;
  position: absolute;
  top: -5px;
  right: 2px;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cur {
  border: 2px solid #f0953d;
}
.bgBtn {
  margin-top: 130px;
  button:active {
    background-image: linear-gradient(#f3ad4582, #ff9c337b);
  }
  button {
    width: 90%;
    margin: 0 4%;
    height: 45px;
    border-radius: 40px;
    background-image: linear-gradient(#f3ad45, #ff9b33);
    border: 0;
    margin-bottom: 15px;
    color: #fff;
    font-weight: bold;
  }
}
</style>
